<template>
  <van-popup
    v-model="showChangeMP"
    position="bottom"
    @close="closeChangeMP"
    class="popDiv"
  >
    <div>
      <div class="headDiv">
        <img :src="closeimg" @click="closeChangeMP" />
        <div class="title">输入新的金额（系统指导价¥{{oldPrice}}）</div>
        <div class="content">
          <input
            placeholder="请输入新的维修价格"
            v-model="number"
            class="input"
          />
          <van-button class="button" @click="sureClick">立即修改</van-button>
        </div>
      </div>
      <van-number-keyboard
        :show="true"
        extra-key="."
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "ChangeMoneyPopup",
  data() {
    return {
      showKeyboard: true,
      closeimg: require("@/images/icon/login/delete.png"),
      number: ""
    };
  },
  methods: {
    onInput(value) {
      console.log(value);
      this.number = this.number + value;
    },
    onDelete() {
      // alert(this.number.slice(0,this.number.length - 1));
      this.number = this.number.slice(0, this.number.length - 1);
    },
    sureClick() {
        if (this.number.length < 1){

        }else {
            this.getMoney(this.number);

        }
    }
  },
  props: {
    showChangeMP: Boolean,
    closeChangeMP: Function,
      getMoney:Function,
      oldPrice:String
  }
};
</script>

<style scoped>
.popDiv {
  /*padding:1.3333333333333333rem;*/
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 25rem;
}
.headDiv {
  height: 10rem;
  display: flex;
  flex-direction: column;
}
img {
  margin-top: 1.3333333333333333rem;
  margin-left: 1.3333333333333333rem;

  height: 1rem;
  width: 1rem;
}
.title {
  width: 100%;
  text-align: center;
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.2333333333333334rem;
}
.content {
  margin-top: 1.3666666666666667rem;
}
.input {
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;

  background-color: #f0f1f5;
  width: 13.9rem;
  height: 2.8666666666666667rem;
  background: rgba(240, 241, 245, 1);
  border-radius: 1.5333333333333334rem;
}
.button {
  background-color: #397be6;
  color: white;

  width: 6.666666666666667rem;
  height: 2.8666666666666667rem;
  background: rgba(57, 123, 230, 1);
  border-radius: 1.4333333333333333rem;

  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  line-height: 2.8666666666666667rem;
}

input {
  text-align: center;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
}

input::-webkit-input-placeholder {
  color: #bfc3cd;
}
input::-moz-placeholder {
  color: #bfc3cd;
}
input::-ms-input-placeholder {
  color: #bfc3cd;
}
</style>
